<template>
  <!-- 图生视频 -->
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="right-area">
              <div class="right-header">
                <div class="header-title">为您提取文案信息</div>
                <div class="header-subtitle">AI生成，仅供参考，您对该内容的使用应严格遵循国家相关法律法规的规定</div>
              </div>
              <div class="right-main">
                <div class="left-content">
                  <el-tabs v-model="sourcetType" @tab-change="handleTypeChange" style="height: 100%;">
                    <el-tab-pane label="视频提取" name="video" style="height: 100%;">
                      <div class="area-container center-area">
                        <div class="center-content">
                          <!-- 从视频提取文件 -->
                          <el-switch v-model="typeData.videoInter" inline-prompt active-text="从素材库选择"
                            inactive-text="粘贴外部视频链接" @change="changeVideoInter" />
                          <div class="img-con" v-if="typeData.videoInter">
                            <!-- 从素材选择 -->
                            <div class="section-title">
                              选择视频素材
                              <span v-if="formData.duration">(时长: {{ formData.duration }})</span>
                            </div>
                            <div class="img-sec">
                              <div class="upload-img" @click="chooseVideoMaterial">
                                <el-icon size="24" v-if="!formData.videoUrl">
                                  <Plus />
                                </el-icon>
                                <video v-if="formData.videoUrl" :src="formData.videoUrl"
                                  style="object-fit: contain; width: 100%; height: 100%;" />
                              </div>
                            </div>
                          </div>
                          <div class="img-con2" v-if="!typeData.videoInter">
                            <!-- 粘贴外部视频链接 -->
                            <div class="section-title">
                              粘贴外部视频链接
                            </div>
                            <div style="height: calc(100% - 40px); display: flex; flex-direction: row; gap:10px">
                              <div class="param-sec">
                                <textarea v-model="formData.videoUrl" class="description-input"
                                  placeholder="请粘贴外部视频链接..." rows="4" />
                              </div>
                              <div class="img-sec">
                                <div class="upload-img">
                                  <span style="color: #a5a5a5;" v-if="!formData.videoUrl">
                                    此处显示外部链接视频
                                  </span>
                                  <video v-if="formData.videoUrl" :src="formData.videoUrl"
                                    style="object-fit: contain; width: 100%; height: 100%;" />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="图片提取" name="image" style="height: 100%;">
                      <div class="area-container center-area">
                        <div class="center-content">
                          <!-- 从图片提取文件 -->
                          <el-switch v-model="typeData.imageInter" inline-prompt active-text="从素材库选择"
                            inactive-text="粘贴外部图片链接" @change="changeImageInter" />
                          <div class="img-con" v-if="typeData.imageInter">
                            <!-- 从素材选择 -->
                            <div class="section-title">
                              选择图片素材
                            </div>
                            <div class="img-sec">
                              <div class="upload-img" @click="chooseImgMaterial">
                                <el-icon size="24" v-if="!formData.imgUrl">
                                  <Plus />
                                </el-icon>
                                <img v-if="formData.imgUrl" :src="formData.imgUrl" style="width: 100%; height: 100%;">
                              </div>
                            </div>
                          </div>
                          <div class="img-con2" v-if="!typeData.imageInter">
                            <!-- 粘贴外部图片链接 -->
                            <div class="section-title">
                              粘贴外部图片链接
                            </div>
                            <div style="flex: 1; display: flex; flex-direction: row; gap:10px">
                              <div class="param-sec">
                                <textarea v-model="formData.imgUrl" class="description-input" placeholder="粘贴外部图片链接..."
                                  rows="4" />
                              </div>
                              <div class="img-sec">
                                <div class="upload-img">
                                  <span style="color: #a5a5a5;" v-if="!formData.imgUrl">
                                    此处显示外部链接图片
                                  </span>
                                  <img v-if="formData.imgUrl" :src="formData.imgUrl" style="width: 100%; height: 100%;">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="音频提取" name="audio" style="height: 100%;">
                      <div class="area-container center-area">
                        <div class="center-content">
                          <!-- 从音频提取文件 -->
                          <el-switch v-model="typeData.audioInter" inline-prompt active-text="从素材库选择"
                            inactive-text="粘贴外部音频链接" @change="changeAudioInter" />
                          <div class="img-con" v-if="typeData.audioInter">
                            <!-- 从素材选择 -->
                            <div class="section-title">
                              选择音频素材
                            </div>
                            <div class="img-sec">
                              <div class="upload-img" @click="chooseAudioMaterial">
                                <el-icon size="24" v-if="!formData.audioUrl">
                                  <Plus />
                                </el-icon>
                                <audio controls v-if="formData.audioUrl">
                                  <source :src="formData.audioUrl" type="audio/mpeg">
                                </audio>
                              </div>
                            </div>
                          </div>
                          <div class="img-con2" v-if="!typeData.audioInter">
                            <!-- 粘贴外部音频链接 -->
                            <div class="section-title">
                              粘贴外部音频链接
                            </div>
                            <div style="flex: 1; display: flex; flex-direction: row; gap:10px">
                              <div class="param-sec">
                                <textarea v-model="formData.audioUrl" class="description-input"
                                  placeholder="粘贴外部音频链接..." rows="4" />
                              </div>
                              <div class="img-sec">
                                <div class="upload-img">
                                  <span style="color: #a5a5a5;" v-if="!formData.audioUrl">
                                    此处显示外部链接音频
                                  </span>
                                  <audio controls v-if="formData.audioUrl">
                                    <source :src="formData.audioUrl" type="audio/mpeg">
                                  </audio>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="网页提取" name="webUrl" style="height: 100%;">
                      <div class="area-container center-area">
                        <div class="center-content">
                          <!-- 从网页提取文本 -->
                          <div class="txt-con">
                            <!-- 粘贴外部网页链接 -->
                            <div class="section-title">
                              粘贴外部网页链接
                            </div>
                            <div style="flex: 1; display: flex; flex-direction: row; gap:10px">
                              <div class="param-sec">
                                <textarea v-model="formData.webUrl" class="description-input" placeholder="粘贴外部网页链接..."
                                  rows="4" />
                              </div>
                            </div>
                          </div>
                          <div class="txt-con">
                            <!-- 粘贴外部网页链接 -->
                            <div class="section-title">
                              输入提取要求
                            </div>
                            <div style="flex: 1; display: flex; flex-direction: row; gap:10px">
                              <div class="param-sec">
                                <textarea v-model="formData.prompt" class="description-input" placeholder="输入提取要求..."
                                  rows="4" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="right-content">
                  <div v-if="sourcetType === 'video'">
                    <h4>说明</h4>
                    <p>从视频的视觉信息和音频信息进行分析提取文案信息。</p>
                    <p>视频文件只能输入一个，大小限制为 150 MB，时长限制为 40s。</p>
                    <p>
                      视频文件中的视觉信息与音频信息会分开计费。
                    </p>
                  </div>
                  <div v-if="sourcetType === 'image'">
                    <h4>说明</h4>
                    <p>从图片进行分析提取文案信息。</p>
                    <p>图片文件的大小不超过10 MB。</p>
                    <p>
                      图片的宽度和高度应大于10像素，宽高比不应超过200:1或1:200。
                    </p>
                  </div>
                  <div v-if="sourcetType === 'audio'">
                    <h4>说明</h4>
                    <p>从音频进行分析提取文案信息。</p>
                    <p>大小不能超过 10 MB，时长最长 3 分钟。</p>
                  </div>
                  <div v-if="sourcetType === 'webUrl'">
                    <h4>说明</h4>
                    <p>从网页内容进行分析提取文案信息。</p>
                    <p>只会根据网页的文本内容进行分析提取，不支持从网页中提取图片、视频等内容。</p>
                    <p>
                      不支持需要登陆访问的网页。
                    </p>
                  </div>
                  <div class="text-result">
                    <textarea v-model="textResult" class="description-input" placeholder="等待文案输出..."
                      style="height: 100%;" readonly></textarea>
                  </div>
                  <div class="step-buttons">
                    <div>
                      <el-button type="primary" @click="handleGenerate">提取文案</el-button>
                    </div>
                  </div>
                </div>
                <CustomLoading :loading="isLoading" :texts="loadingTexts" :icon-size="40" />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  <MyDialog v-model="showChooseImgDialog" title="选择图片素材" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <SourcePictureNew :multiple="false" ref="sourcePictureNewRef" @confirm="imgMaterialChoosed"/>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="showChooseImgDialog = false">取消</el-button>
      <el-button type="primary" @click="imgMaterialChoosed">确定</el-button>
    </template>
  </MyDialog>
  <MyDialog v-model="showChooseVideoDialog" title="选择视频素材" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <SourceVideoNew :multiple="false" ref="sourceVideoNewRef" @confirm="videoMaterialChoosed"/>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="showChooseVideoDialog = false">取消</el-button>
      <el-button type="primary" @click="videoMaterialChoosed">确定</el-button>
    </template>
  </MyDialog>
  <MyDialog v-model="showChooseAudioDialog" title="选择音频素材" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <SourceAudioNew :multiple="false" ref="sourceAudioNewRef" @confirm="audioMaterialChoosed"/>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="showChooseAudioDialog = false">取消</el-button>
      <el-button type="primary" @click="audioMaterialChoosed">确定</el-button>
    </template>
  </MyDialog>
  <CustomLoading :loading="isLoading" :texts="loadingTexts" :icon-size="40" />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { useRouter } from 'vue-router'
import MyDialog from '../common/MyDialog.vue';
import CustomLoading from '../common/CustomLoading.vue';
import SourcePictureNew from '../videoWarehouse/SourcePictureNew.vue';
import SourceVideoNew from '../videoWarehouse/SourceVideoNew.vue';
import SourceAudioNew from '../videoWarehouse/SourceAudioNew.vue';
import { ElMessage } from 'element-plus';
import MyHeader from '../common/MyHeader.vue';
import utils from '../../utils/utils';

const router = useRouter()
//主题控制light  dark
const theme = utils.getTheme();
// 网站背景图
const website_bg_url = ref('')
// 网站logo
const website_logo = ref('')
// 原素材的类型
const sourcetType = ref('video');

const typeData = reactive({
  videoInter: true,
  imageInter: true,
  audioInter: true,
})

const textResult = ref('');

// 要提交的数据结构
const formData = reactive<any>({
  // 图片素材
  imgUrl: '',
  // 视频素材
  videoUrl: '',
  // 音频素材
  audioUrl: '',
  // 网页链接
  webUrl: '',
  // 视频时长
  duration: 0,
  // prompt
  prompt: '从视频文件中提取相应的文案内容',
})
// 加载中状态控制
const isLoading = ref<boolean>(false);
const loadingTexts = ref<string[]>([
  '正在处理您的请求...',
  '数据加载中...',
  '请耐心等待...',
  '系统正在处理...',
  '即将完成...'
]);
// 选择视频素材开关
const showChooseVideoDialog = ref(false);
// 选择图片素材开关
const showChooseImgDialog = ref(false);
// 选择音频素材开关
const showChooseAudioDialog = ref(false);
// 选择图片的组件
const sourcePictureNewRef = ref(null);
// 选择视频的组件
const sourceVideoNewRef = ref(null);
// 选择音频的组件
const sourceAudioNewRef = ref(null);

const changeVideoInter = (val: boolean) => {
  typeData.videoInter = val;
  formData.videoUrl = '';
  formData.duration = 0;
}

const changeImageInter = (val: boolean) => {
  typeData.imageInter = val;
  formData.imgUrl = '';
}

const changeAudioInter = (val: boolean) => {
  typeData.audioInter = val;
  formData.audioUrl = '';
  formData.audioDuration = 0;
}

// 选择视频素材
const chooseVideoMaterial = () => {
  if (typeData.videoInter) {
    showChooseVideoDialog.value = true;
  }
}
// 选择图片素材
const chooseImgMaterial = () => {
  if (typeData.imageInter) {
    showChooseImgDialog.value = true;
  }
}
// 选择音频素材
const chooseAudioMaterial = () => {
  if (typeData.audioInter) {
    showChooseAudioDialog.value = true;
  }
}

// 图片素材选择完成处理
const imgMaterialChoosed = () => {
  let imgUrl = sourcePictureNewRef.value.getSelectMateria();
  if (imgUrl.length === 0) {
    ElMessage.error('请选择图片');
    return;
  }
  // 回显图片
  formData.imgUrl = imgUrl[0];
  showChooseImgDialog.value = false;
}

// 视频素材选择完成处理
const videoMaterialChoosed = () => {
  let video = sourceVideoNewRef.value.getSelectMateria();
  if (!video) {
    ElMessage.error('请选择视频');
    return;
  }
  // 回显视频
  formData.videoUrl = video.url;
  formData.duration = video.duration;
  showChooseVideoDialog.value = false;
}

// 音频素材选择完成处理
const audioMaterialChoosed = () => {
  let audio = sourceAudioNewRef.value.getSelectMateria();
  if (!audio) {
    ElMessage.error('请选择音频');
    return;
  }
  // 回显音频
  formData.audioUrl = audio.url;
  formData.duration = audio.duration;
  showChooseAudioDialog.value = false;
}

const handleTypeChange = (val) => {
  sourcetType.value = val;
  textResult.value = '';
  if (sourcetType.value === 'video') {
    formData.prompt = '从视频文件中提取相应的文案内容';
  } else if (sourcetType.value === 'image') {
    formData.prompt = '从图片文件中提取相应的文案内容';
  } else if (sourcetType.value === 'audio') {
    formData.prompt = '从音频文件中提取相应的文案内容';
  } else if (sourcetType.value === 'webUrl') {
    formData.prompt = '提取文案内容';
  }
}

const handleGenerate = async () => {
  let serverUrl = 'api/aliyun_tongyi/bailian_duomo_tai/get_text';
  if (sourcetType.value === 'video') {
    formData.imgUrl = '';
    formData.audioUrl = '';
    if (!formData.videoUrl) {
      ElMessage.error('请选择视频');
      return;
    }
    // 从视频提取
    if (formData.duration == 0) {
      // 尝试提取时长
      try {
        formData.duration = await getVideoDuration(formData.videoUrl)
      } catch (error) {
        console.log('视频时长提取失败');
      }
    }
    if (formData.duration > 40) {
      ElMessage.error('视频时长不能大于40秒');
      return;
    }
  } else if (sourcetType.value === 'image') {
    formData.videoUrl = '';
    formData.audioUrl = '';
    if (!formData.imgUrl) {
      ElMessage.error('请选图片');
      return;
    }
  } else if (sourcetType.value === 'audio') {
    formData.imgUrl = '';
    formData.videoUrl = '';
    if (!formData.audioUrl) {
      ElMessage.error('请选择音频');
      return;
    }
    // 从视频提取
    if (formData.duration == 0) {
      // 尝试提取时长
      try {
        formData.duration = await getAudioDuration(formData.audioUrl)
      } catch (error) {
        console.log('音频时长提取失败');
      }
    }
    if (formData.duration > 180) {
      ElMessage.error('音频时长不能大于180秒');
      return;
    }
  } else if (sourcetType.value === 'webUrl') {
    formData.imgUrl = '';
    formData.videoUrl = '';
    formData.audioUrl = '';
    if (!formData.webUrl) {
      ElMessage.error('请输入网页链接');
      return;
    }
    serverUrl = 'api/aliyun_tongyi/bailian_duomo_tai/get_text_from_webpage';
  }
  // 提交数据
  isLoading.value = true;
  try {
    const response = await axiosUtil.post(serverUrl, formData)
    if (response.data.code === 1 && response.data.data) {
      if (sourcetType.value === 'webUrl') {
        textResult.value = '文案概要:\n' + response.data.data.data.content;
        if (response.data.data.data.tags || response.data.data.data.tags.length > 0) {
          textResult.value += '\n文案标签:\n' + response.data.data.data.tags.join(",");
        }
        if (response.data.data.data.comment || response.data.data.data.keywords.comment > 0) {
          textResult.value += '\n网友观点:\n' + response.data.data.data.comment.join("\n");
        }
      } else {
        textResult.value = response.data.data.data
      }
    } else {
      ElMessage.error(response.data.msg || '请求失败');
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('请求失败');
  } finally {
    isLoading.value = false;
  }
}

function getAudioDuration(url) {
  return new Promise((resolve, reject) => {
    const audio = new Audio();

    // 处理元数据加载
    audio.addEventListener('loadedmetadata', () => {
      resolve(audio.duration); // 返回音频时长（秒）
    });

    // 处理错误
    audio.addEventListener('error', (e) => {
      reject(new Error('无法获取音频时长: ' + e.message));
    });

    // 设置音频源
    audio.src = url;
  });
}

function getVideoDuration(url) {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.src = url;

    video.addEventListener('loadedmetadata', () => {
      resolve(video.duration); // 返回秒数
    });

    video.addEventListener('error', (e) => {
      reject(new Error('无法获取视频时长'));
    });
  });
}

onMounted(() => {
  initWebsiteBgUrl()
  document.body.classList.remove('login-page')
})

//读取配置，获取网站背景图和网站logo
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
    website_logo.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_logo || ''
  }
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  backdrop-filter: blur(10px);
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.spacer {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* padding: 0 20px; */
  /* margin-top: 3vh; */
}

.btn-icon {
  font-size: 16px;
}

.el-main {
  padding: 20px;
  height: 85vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.count-input {
  width: 120px;
}

.count-input :deep(.el-input-number__decrease),
.count-input :deep(.el-input-number__increase) {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.4)" : "rgba(0, 102, 204, 0.5)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.4)"');
  color: #fff;
}

.count-input :deep(.el-input-number__decrease:hover),
.count-input :deep(.el-input-number__increase:hover) {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.6)" : "rgba(0, 102, 204, 0.7)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.5)" : "rgba(0, 204, 255, 0.6)"');
}

.count-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
}

.count-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"');
}

.count-input :deep(.el-input__inner) {
  color: #fff;
}

.generate-btn {
  width: 120px;
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.6)" : "rgba(0, 102, 204, 0.7)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.4)" : "rgba(0, 204, 255, 0.5)"') !important;
  color: #fff !important;
  transition: all 0.3s ease;
  margin-left: 0;
}

.generate-btn:hover {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.8)" : "rgba(0, 102, 204, 0.9)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.6)" : "rgba(0, 204, 255, 0.7)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.4)"');
}

.right-header {
  height: 10%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.header-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 20px;
  font-weight: bold;
}

.header-subtitle {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-size: 12px;
}

.right-area {
  height: 100%;
}
.right-main {
  padding: 15px;
  display: flex;
  flex-direction: row;
  height: calc(100% - 60px);
  min-height: 400px;
  flex: 1;
  overflow-y: auto;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 4px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.right-footer {
  height: 10%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.publish-btn {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.6)" : "rgba(0, 102, 204, 0.7)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.4)" : "rgba(0, 204, 255, 0.5)"') !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.publish-btn:hover {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.8)" : "rgba(0, 102, 204, 0.9)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.6)" : "rgba(0, 204, 255, 0.7)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.4)"');
}

.three-step-container {
  height: 100%;
  padding: 20px;
  --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.step-content {
  height: calc(100% - 70px);
  padding: 20px 0 0 0;
  display: flex;
  flex-direction: column;
}

.step-one,
.step-two {
  height: 100%;
  display: flex;
  gap: 20px;
}


.left-content {
  width: 400px;
  height: 100%;
  font-size: 14px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.right-content {
  padding-top: 30px;
  padding-left: 20px;
  height: 100%;
  flex: 1;
  font-size: 14px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left-content img,
.left-content video {
  width: 100%;
  height: auto;
}

.step-buttons {
  margin-bottom: 10px;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.image-section {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.select-section {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.input-section {
  /* height: 100%; */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 14px;
  font-weight: 500;
}

.section-title span {
  font-size: 12px;
  color: #d5d5d5;
}

.description-input {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
  border-radius: 4px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  padding: 10px;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
}

.description-input:focus {
  outline: none;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.4)"');
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
}

.description-input::placeholder {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.center-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.img-con {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: calc(100% - 20px);
}

.img-con2 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: calc(100% - 20px);
}

.txt-con {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.upload-img-disable {
  background: #d5d5d5 !important;
}

.upload-img {
  min-height: 0;
  /* 关键！允许缩小到0 */
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-shadow: var(--el-box-shadow-dark);
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.img-con .img-sec {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.img-con2 .img-sec {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.img-con .param-sec {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  height: 30%;
}

.img-con2 .param-sec {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  height: 100%;
}

.txt-con .param-sec {

  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  height: 100%;
}

.generate-row {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.text-result {
  flex: 1;
  padding: 10px 0;
}

:deep(.el-tabs__item) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}
</style>

<style>
/* 隐藏全局背景图 */
body::before {
  display: none !important;
}

/* 优化Son页面背景图和滚动条 */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  background: url(../../assets/main/背景.png) no-repeat center center;
  background-size: cover;
}
</style>
